<template>
	<el-card
		shadow="always"
		class="h-full"
		:bodyStyle="{
			height: 'calc(100% - 55px)',
			overflowY: 'auto',
		}"
	>
		<template #header>
			<div class="flex items-center justify-between">
				<el-radio-group v-model="subscribeType" size="small">
					<el-radio-button label="1">HTTP方式</el-radio-button>
					<el-radio-button label="2">MQ方式</el-radio-button>
					<el-radio-button label="3">已对接平台</el-radio-button>
				</el-radio-group>
				<div>
					<el-button icon="plus" type="primary" size="small" v-show="subscribeType === '1'">新增</el-button>
					<el-button icon="refresh" size="small" type="primary" plain>刷新</el-button>
				</div>
			</div>
		</template>
		<el-table
			ref="tableRef"
			size="small"
			:data="state.dataList"
			v-loading="state.loading"
			style="width: 100%; height: 100%"
			row-key="id"
			border
			:cell-style="tableStyle.cellStyle"
			:header-cell-style="tableStyle?.headerCellStyle"
		>
			<el-table-column label="序号" type="index" width="60" />
			<el-table-column label="平台名称" prop="name" show-overflow-tooltip />
			<el-table-column label="平台级别" prop="level" show-overflow-tooltip />
			<el-table-column label="地区" prop="area" show-overflow-tooltip />
		</el-table>
	</el-card>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { subscribeListData } from '../data';
const subscribeType = ref('1');
const state: BasicTableProps = reactive<BasicTableProps>({
	// pageList: deptTree,
	dataList: subscribeListData.rows,
	isPage: true,
});
const { getDataList, tableStyle } = useTable(state);
</script>

<style lang="scss" scoped></style>
